<template>
  <div :class="{'has-logo':showLogo}">
    <logo v-if="showLogo" :collapse="isCollapse" />
    <el-scrollbar wrap-class="scrollbar-wrapper">
      <el-menu :default-active="activeMenu" :collapse="isCollapse" :background-color="variables.menuBg"
        :text-color="variables.menuText" :unique-opened="false" :active-text-color="variables.menuActiveText"
        :collapse-transition="false" mode="vertical">
        <menu-item v-for="(route,index) in subsystem_routes" :key="index" :item="route" :base-path="route.path" />
      </el-menu>
    </el-scrollbar>
  </div>
</template>

<script>
  import {
    mapGetters
  } from 'vuex'
  import Logo from './Logo'
  import MenuItem from './MenuItem'
  import variables from '@/styles/variables.scss'

  export default {
    components: {
      MenuItem,
      Logo
    },
    data() {
      return {}
    },
    computed: {
      ...mapGetters([
        'subsystem_routes',
        'sidebar'
      ]),
      variables() {
        return variables
      },
      isCollapse() {
        return !this.sidebar.opened
      },
      showLogo() {
        return this.$store.state.settings.sidebarLogo
      },
      activeMenu() {
        const route = this.$route
        const {
          meta,
          path
        } = route
        // if set path, the sidebar will highlight the path you set
        if (meta.activeMenu) {
          return meta.activeMenu
        }
        return path
      },
    },
    mounted() {
      // console.log("子系统",this.subsystem_routes)
    },
  }
</script>
